<template>
    <section class="main-content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-3">
                    <sidebar v-bind:items="[
                        {name: 'Back', type: 'back', icon: 'fa fa-long-arrow-left fa-fw'},
                    ]"></sidebar>
                </div>

                <div class="col-md-9">
                    <h1>Create Report</h1>
                    <span>{{ date }}</span>

                    <div class="form-group">
                        <label>Title</label>
                        <input type="text" class="form-control" v-model="report.title">
                    </div>

                    <div class="form-group">
                        <label>Today Job</label>
                        <textarea class="form-control" v-model="report.todayJob"></textarea>
                    </div>

                    <div class="form-group">
                        <label>Todo Job</label>
                        <textarea class="form-control" v-model="report.todoJob"></textarea>
                    </div>

                    <button id="create-note-button" v-on:click="createReport()" class="btn btn-primary mb-3"><i class="fa fa-plus fa-fw"></i> Create</button>
                </div>
            </div>
        </div>
    </section>
</template>

<script>

import { mapState } from 'vuex'

export default {
    name: 'editReport',
    data () {
        return {
            report: {
                title: '',
                todayJob: '',
                todoJob: ''
            },
            date: new Date()
        }
    },
    methods: {
        async createReport () {
            if (!this.report.title || !this.report.todayJob || !this.report.todoJob) {
                this.$toasted.error('Title and Content need to be filled out.')
                return
            }

            try {
                const responseCreate = await this.$store.dispatch('report/createReport', this.report)
                let insertId = responseCreate.data.id
                const responseResult = await this.$store.dispatch('report/getReport', insertId)
                await this.$store.dispatch('report/addReportToStack', responseResult)
                this.$router.push({name: 'account'})
                this.$toasted.success('Note created.')
            } catch (error) {
                this.$toasted.error('There was an error connecting to the server.')
            }
        }
    },
    computed: {
        ...mapState({
            user: state => state.user.user,
            reports: state => state.report.reports
        })
    },
    created () {
    }
}
</script>
